<template>
  <div class="roleManage">
    <el-table
      :data="tableData"
      style="width: 100%">
      <!--索引-->
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <!--角色名称-->
      <el-table-column
        property="rolename"
        label="角色名称"
        width="120">
      </el-table-column>
      <!--菜单赋权-->
      <el-table-column
        label="菜单赋权"
        width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="openDialogRrightTree(scope.$index, scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
      <!--动作赋权-->
      <el-table-column label="动作赋权">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="openDialogActionRightTree(scope.$index, scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
      <!--删除角色-->
      <el-table-column label="删除角色">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--添加角色按钮-->
    <el-row type="flex" justify="end">
      <el-col :span="2">
        <el-button type="primary" @click="dialogAddRolesVisible = true">添加角色</el-button>
      </el-col>
    </el-row>
    <!--添加角色弹出框-->
    <el-dialog title="添加角色" :visible.sync="dialogAddRolesVisible" @close="closeDialog">
      <el-form ref="newRoleForm" :model="newRoleForm" :rules="rules">
        <el-form-item  label="角色名称" prop="rolename">
          <el-input v-model="newRoleForm.rolename"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="addNewRole">确定</el-button>
      </div>
    </el-dialog>
    <!--添加菜单树弹出框-->
    <el-dialog title="修改菜单权限" :visible.sync="dialogRrightTreeVisible" @close="closeDialogRrightTree">
      <el-tree
        :data="rrightTree"
        show-checkbox
        default-expand-all
        node-key="rightid"
        ref="RrightTree"
        highlight-current
        :default-checked-keys="checkedRrightTree"
        :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialogRrightTree">取消</el-button>
        <el-button type="primary" @click="updateRrightByRoleId">确定</el-button>
      </div>
    </el-dialog>
    <!--添加动态权限树弹出框-->
    <el-dialog title="修改菜单权限" :visible.sync="dialogActionRightTreeVisible" @close="closeDialogActionRightTree">
      <el-tree
        :data="actionRightTree"
        show-checkbox
        default-expand-all
        node-key="rightid"
        ref="actionRightTree"
        highlight-current
        :default-checked-keys="checkedActionRightTree"
        :props="ActionRightTreeProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialogActionRightTree">取消</el-button>
        <el-button type="primary" @click="updateActionRightByRoleId">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from '../../utils/request'

export default {
  name: 'RoleMange',
  created () {
    this.getAllRoles()
  },
  data () {
    return {
      // 信息
      tableData: [],
      // 为true弹出弹窗
      dialogAddRolesVisible: false,
      selectedRoleid: null,
      // 角色权限树弹出窗
      dialogRrightTreeVisible: false,
      dialogActionRightTreeVisible: false,
      // 添加的用户名称
      newRoleForm: {},
      rules: {
        rolename: [{ required: true, message: '输入用户名', trigger: 'blur' }]
      },
      /**
       * 菜单权限树
       */
      rrightTree: [],
      actionRightTree: [],
      defaultProps: {
        children: 'children',
        label: 'righttext'
      },
      ActionRightTreeProps: {
        children: 'children',
        label: 'righttext'
      },
      // 选中的菜单权限树列表
      checkedRrightTree: [],
      checkedActionRightTree: []
    }
  },
  methods: {
    /**
     * 查询所有角色
     * @returns {Promise<void>}
     */
    async getAllRoles () {
      let response = await axios({
        method: 'get',
        url: 'admin/role/getAllRoles'
      })
      console.log(response)
      if (response.code === '200') {
        this.tableData = response.data
        this.$message.success(response.message)
      } else {
        this.$message.error(response.message)
      }
    },
    /**
     * 添加新的角色
     */
    addNewRole () {
      // 此处为验证，refs里面为form表单的ref定义名称
      this.$refs['newRoleForm'].validate(async valid => {
        // 如果验证不通过，则不走下面的方法内容
        if (!valid) {
          return false
        }
        let response = await axios({
          method: 'put',
          url: 'admin/role/putRole',
          data: this.newRoleForm
        })
        if (response.code === '200') {
          this.$message.success('添加角色成功')
          this.getAllRoles()
          this.dialogAddRolesVisible = false
        } else {
          this.$message.error(response.message)
        }
      })
    },
    /**
     * 关闭添加用户窗口
     */
    closeDialog () {
      this.dialogAddRolesVisible = false
      this.newRoleForm = {}
    },
    /**
     * 打开菜单树窗口
     * @param index 索引
     * @param row 对象
     */
    openDialogRrightTree (index, row) {
      this.selectedRoleid = row.roleid
      this.dialogRrightTreeVisible = true
      this.initRrightTree()
      this.initedRrightTree(row.roleid)
    },
    /**
     * 初始化菜单权限树
     * 展示所有菜单权限
     * @returns {Promise<void>}
     */
    async initRrightTree () {
      let response = await axios({
        method: 'get',
        url: 'admin/role/getRrightTree'
      })
      if (response.code === '200') {
        this.rrightTree = response.data
      } else {
        this.$message.error(response.message)
      }
    },
    /**
     * 初始化动作权限树
     * 展示角色拥有的动作权限
     * @returns {Promise<void>}
     */
    async initedRrightTree (roleid) {
      let response = await axios({
        method: 'get',
        url: 'admin/role/getRrightIdByRoleId/' + roleid
      })
      if (response.code === '200') {
        this.checkedRrightTree = response.data
        // 更新该角色选中的权限树
      } else {
        this.$message.error(response.message)
      }
    },
    /**
     * 更新菜单权限通过用户id
     */
    async updateRrightByRoleId () {
      // 获取全选中的节点
      let updateFullRightTreeList = this.$refs.RrightTree.getCheckedKeys()
      // 获得半选节点
      let updateHalfRightTreeList = this.$refs.RrightTree.getHalfCheckedKeys()
      let updateAllRightTreeList = [...updateFullRightTreeList, ...updateHalfRightTreeList]
      console.log(updateAllRightTreeList)
      let response = await axios({
        method: 'put',
        url: '/admin/role/putRrightTreeByRoleId',
        data: {
          roleId: this.selectedRoleid,
          rightIdList: updateAllRightTreeList
        }
      })
      this.dialogRrightTreeVisible = false
      if (response.code === '200') {
        this.$message.success('修改角色权限成功')
      } else {
        this.$message.error(response.message)
      }
    },
    /**
     * 关闭菜单树窗口
     */
    closeDialogRrightTree () {
      this.dialogRrightTreeVisible = false
    },
    //* *********************************************另一个 */
    /**
     * 打开菜单树窗口
     * @param index 索引
     * @param row 对象
     */
    openDialogActionRightTree (index, row) {
      this.selectedRoleid = row.roleid
      this.dialogActionRightTreeVisible = true
      this.initActionRightTree()
      this.initedActionRightTree(row.roleid)
    },
    /**
     * 初始化菜单权限树
     * 展示所有菜单权限
     * @returns {Promise<void>}
     */
    async initActionRightTree () {
      let response = await axios({
        method: 'get',
        url: 'admin/actionRight/getActionRightTree'
      })
      if (response.code === '200') {
        this.actionRightTree = response.data
      } else {
        this.$message.error(response.message)
      }
    },
    /**
     * 初始化动作权限树
     * 展示角色拥有的动作权限
     * @returns {Promise<void>}
     */
    async initedActionRightTree (roleid) {
      console.log(roleid)
      let response = await axios({
        method: 'get',
        url: 'admin/actionRight/getActionRightIdByRoleId/' + roleid
      })
      if (response.code === '200') {
        this.checkedActionRightTree = response.data
        // 更新该角色选中的权限树
      } else {
        this.$message.error(response.message)
      }
    },
    /**
     * 更新菜单权限通过用户id
     */
    async updateActionRightByRoleId () {
      // 获取全选中的节点
      let updateFullRightTreeList = this.$refs.actionRightTree.getCheckedKeys()
      // 获得半选节点
      let updateHalfRightTreeList = this.$refs.actionRightTree.getHalfCheckedKeys()
      let updateAllRightTreeList = [...updateFullRightTreeList, ...updateHalfRightTreeList]
      console.log(updateAllRightTreeList)
      let response = await axios({
        method: 'put',
        url: '/admin/actionRight/putActionRightTreeByRoleId',
        data: {
          roleId: this.selectedRoleid,
          rightIdList: updateAllRightTreeList
        }
      })
      this.dialogActionRightTreeVisible = false
      if (response.code === '200') {
        this.$message.success('修改角色动作权限成功')
      } else {
        this.$message.error(response.message)
      }
    },
    /**
     * 关闭菜单树窗口
     */
    closeDialogActionRightTree () {
      this.dialogActionRightTreeVisible = false
    },
    // 编辑函数
    handleEdit (index, row) {
      console.log(index, row)
    },
    // 删除角色函数
    handleDelete (index, row) {
      console.log(index, row)
    }
  }
}
</script>

<style scoped>
</style>
